<template>
	<view class="box">
		<scroll-view scroll-x show-scrollbar>
			<view class="select-box" :style="{width: selectWith}">
				<view :class=" actIndex === index? 'select-item active':'select-item'" v-for=" (item,index) in selectList" @click.native="sectionChange(index)">
					{{item.name}}
				</view>
			</view>
		</scroll-view>

		<view class="item" v-for=" (item,index) in studyDetailList" :key="index">
      <view class="detail-head">
        <view class="detail-type">类型:{{item.type}}</view>
        <view class="detail-title">{{item.title}}</view>
      </view>
      
      <view class="detail-body">
        <view class="body-title">{{item.title}}-救援技能培训 课后答题</view>
        <view class="submit-time">提交时间：{{item.submitTime}}</view>
        <view class="operation-btn">
          <view class="piyue">已批阅</view>
          <!-- <view class="reset-answer" @click.native="toResetAnswer(item.classId)">申请重做</view> -->
          <view class="score">
            <view class="score-detail">{{item.score}}</view>
            <view class="fen">分</view>
          </view>
        </view>
      </view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				actIndex: 0,
				selectWith: 0,
				studyDetailList: [],
				selectList: [{
					id: 0,
					name: '全部',
				} ],

			}
		},
		onLoad() {
			this.getStudyDetailList();
			this.getTypeList();
		},
		methods: {
      toResetAnswer(cid){
        // console.log(cid)
      },
			//获取类型列表
			getTypeList() {
				this.$request({
					url: `${this.$baseUrl}/users/certifyTypeList`
				}).then(res => {
					this.selectList = [...this.selectList, ...res.data.data]
					this.selectWith = this.selectList.length * 300 + 'rpx'
				}).catch(res => {
					console.log(res)
				})
			},

			sectionChange(index) {
				this.actIndex = index
				this.getStudyDetailList()
				
			},

			//获取类型记录列表
			getStudyDetailList() {
				let uid = uni.getStorageSync("user").id

				this.$request({
					url: `${this.$baseUrl}/studyDetail/${uid}/${this.actIndex}`
				}).then(res => {
					this.studyDetailList = res.data.data
          // console.log(this.studyDetailList)
				}).catch(res => {
					console.log(res)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		background-color: #F4F4F4;
		min-height: 1448rpx;
		// padding-left: 30rpx;
    // padding-right: 30rpx;
		.select-box {
			background-color: #FFFFFF;
			padding: 10rpx;
			// border-bottom: 1rpx solid #cacaca;
			margin-bottom: 40rpx;
			display: flex;
			box-sizing: border-box;

			.select-item {
				// border: 1rpx solid #55aaff;
				width: 300rpx;
				height: 70rpx;
				line-height: 70rpx;
				text-align: center;
        color: #acacac;
				
			}
			.active {
				color: black;
				// background-color: #55aaff ;
			}
		}
    
		.item {
      width: 686rpx;
      height: 272rpx;
      opacity: 1;
      border-radius: 16rpx;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 8rpx 24rpx 0px rgba(23, 42, 99, 0.1);
      // border-radius: 16rpx;
      .detail-head{
       width: 686rpx;
       height: 64rpx;
       opacity: 1;
       border-radius: 16rpx 16rpx, 0px, 0px;
       background: rgba(90, 221, 158, 1);
       display: flex;
       .detail-title{
         // margin-left: 270rpx;
         margin-left: 200rpx;
         min-width: 112rpx;
         height: 40rpx;
         font-size: 28rpx;
         font-weight: 600;
         letter-spacing: 0px;
         line-height: 39.2rpx;
         color: rgba(255, 255, 255, 1);
         text-align: left;
         vertical-align: top;
         margin-top: 12rpx;
       }
        .detail-type{
          margin-top: 16rpx;
          min-width: 240rpx;
          height: 32rpx;
          margin-left: 32rpx;
          color: white;
          font-size: 24rpx;
          font-weight: 600;
          letter-spacing: 0px;
          line-height: 33.6rpx;
          color: rgba(255, 255, 255, 1);
          text-align: left;
          vertical-align: top;
        }
      }
			position: relative;
			// padding: 20rpx;
      width:686rpx;
      height: 272rpx;
      margin-left: 32rpx;
			border: 1rpx solid #c8c8c8;
      // background-color: #55aaff;
			border-radius: 10rpx;
			margin-bottom: 30rpx;
      margin-top: 32rpx;
      // display: flex;
      .detail-body{
        height: 208rpx;
        width: 686rpx;
        .submit-time{
          width: 372rpx;
          height: 34rpx;
          opacity: 1;
          /** 文本1 */
          font-size: 24rpx;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 33.4rpx;
          color: rgba(153, 153, 153, 1);
          text-align: left;
          vertical-align: top;
          margin-top: 8rpx;
          margin-left: 32rpx;
        }
        .body-title{
          margin-left: 32rpx;
          margin-top: 24rpx;
          width: 480px;
          height: 46rpx;
          opacity: 1;
          font-size: 32rpx;
          font-weight: 600;
          letter-spacing: 0px;
          line-height: 44.8rpx;
          color: rgba(51, 51, 51, 1);
          text-align: left;
          vertical-align: top;
        }
        .operation-btn{
          display: flex;
          align-items: baseline;
          .score{
            min-width: 106rpx;
            height: 64rpx;
            margin-left: 400rpx;
            display: flex;
            .fen{
              margin-top: 23rpx;
              font-size: 28rpx;
              font-weight: 600;
              letter-spacing: 0px;
              line-height: 64rpx;
              color: rgba(230, 52, 52, 1);
            }
            .score-detail{
              font-size: 64rpx;
              font-weight: 600;
              letter-spacing: 0px;
              line-height: NaNpx;
              color: rgba(230, 52, 52, 1);
              text-align: left;
              vertical-align: top;
            }
          }
          .reset-answer{
            width: 128rpx;
            height: 48rpx;
            opacity: 1;
            border-radius: 8rpx;
            margin-top: 16rpx;
            margin-left: 24rpx;
            border: 1px solid rgba(90, 221, 158, 1);
            /** 文本1 */
            font-size: 24rpx;
            font-weight: 500;
            letter-spacing: 0px;
            line-height: 48rpx;
            color: rgba(90, 221, 158, 1);
            text-align: left;
            vertical-align: top;
            text-align: center;

          }
          .piyue{
            margin-left: 32rpx;
            margin-top: 20rpx;
            width: 84rpx;
            height: 40rpx;
            opacity: 1;
            /** 文本1 */
            font-size: 28rpx;
            font-weight: 400;
            letter-spacing: 0px;
            line-height: 39.2px;
            color: rgba(102, 102, 102, 1);
            text-align: left;
            vertical-align: top;
          }
        }
      }
    }
  
  }
</style>
